<template>
  <div>
        <div class="header-container">
        <div class="header" >   
                <div class="icon-back" v-on:click="back"></div>        
                <div class="title">系统邮件</div>
                <div class="icon-more" @click="appear"></div>            
        </div>   
        <div class="more" v-show="show">
            <ul>
            <router-link to="/msg"><li> <i class="msg"></i><span>消息</span></li></router-link>
                <router-link to="/home"><li class="bottom"> <i class="home "></i><span>首页</span></li></router-link>
            </ul>
        </div>
        </div>
        <div class="price">
            <div class="bargain">【好个大胆狂徒|69级】已重新上架</div>
            <div class="time">2020-12-14 21:15:23</div>
            <div class="cost">您收藏的【好个大胆狂徒|69级】重新上架了，机会稍纵即逝，快去看看吧</div>
        </div>
        <div class="goods"></div>
  </div>
</template>

<script >
export default {
    data(){
        return{
            show:false
        }
    },
    methods:{
    back(){
        this.$router.go(-1);//返回上一层
    },
    appear(){
        this.show=!this.show
    }
    }
    


}
</script>

<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;
    z-index: 4;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .icon-more {
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/more.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}

.more{
    position: absolute;
    height: rem(300);
    width: rem(350);
    z-index: 999;
    top: rem(140);
    right: rem(20);
    background-color: #21202c;
    border-radius: rem(20);
    padding:0 rem(30);
    .bottom{
    border-top: 1px solid grey;
    }
    li{
        display: flex;
        width: 100%;
        height: rem(150);
        line-height:rem(150) ;
        font-size: rem(50);
        color: #fff;
        .msg{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../../assets/imgs/xinfwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .home{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../../assets/imgs/homewhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        .collection{
            width: rem(60);
            height:rem(60);
            margin-top: rem(50);
            background: url(../../../../assets/imgs/scwhite.svg) no-repeat 50% 50%;
            background-size: auto 100%;
        }
        span{
            margin-left: rem(30);
            flex: 1;
        }
    }
}
.more::after{
    content: '';
    display: block;
    width: rem(20);
    height: rem(20);
    position: absolute;
    right: rem(40);
    top: rem(-10);
    transform: rotate(45deg);
    opacity: .93;
    background-color: #21202c;
}
.price{
    padding: rem(20) rem(30);
    width: 100%;
    margin-top:rem(130);
    height: rem(280);
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    text-align: center;
    .bargain{
        font-size: rem(42);
    }
    .time{
        font-size: rem(37);
        color: #888;
        margin-top: rem(10);
    }
    .cost{
        font-size: rem(42);
        text-align: left;
        margin-top: rem(30);

    }
}
.goods{
    margin-top: rem(15);
    height: rem(280);
    background-color: #fff;
}
    

</style>
